<template>
	<view>
		<view style="padding-top: 10upx; margin: 0 23upx;">
			<!--搜索框-->
			<!-- <view class="seach">
				<view class="seach_view">
					<image class="seach_img" src="../../static/type/icon/seach.svg"></image>
					<input class="seach_text" placeholder="搜索商品-好货等着你" />
				</view>
			</view> -->
		</view>
		<view class="content">
			<!--左侧菜单-->
			<view class="left_list" :style="{height:winHeight + 'px'}">
				<scroll-view class="scroll_list" scroll-y>
					<block v-for="(type_list, index_type) in typeList" :key='index_type'>
						<view :class="'list_view' + animation" @click="showShop(index_type)">
							<view class="list" :class="{'active':tabIndex == index_type}" @tap="tabtap(index_type)">
								{{type_list.group_name}}
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!--右侧商品详细-->
			<view class="right_view" :style="{height:winHeight_right + 'px'}">
				<scroll-view class="scroll_shop" scroll-y :style="{height:winHeight_right + 'px'}" @scrolltolower="toLoadmore">
					<!--商品列表-->
					<block v-for="(shop_detail, index_detail) in detailList" :key='index_detail'>
						<view class="shop_detail_view" @click="todetail(index_detail, shop_detail.id)">
							<view class="shop_detail_zu" v-if="shop_detail.goods_type == 1">
								
								<view class="shop_detail_left">
									<image :src="shop_detail.cover_image[0]"></image>
								</view>
								<view class="shop_detail_right">
									<text>商品名称：{{shop_detail.goods_name}}</text>
									<text>剩余：{{shop_detail.goods_stock}}件</text>
									<text>价格：￥{{shop_detail.sell_price}}</text>
								</view>
								
							</view>
							<view class="shop_detail_zu" v-else>
									<view class="shop_detail_left">
										<image :src="shop_detail.cover_image[0]"></image>
									</view>
									<view class="shop_detail_right">
										<text>商品名称：{{shop_detail.goods_name}}</text>
										<text>押金：¥{{shop_detail.rent_money}}</text>
										<text>租金：¥{{shop_detail.months_money}}</text>
										<text>扣租方式：{{shop_detail.way_describes}}</text>
										<text>缴费日期：每月1号</text>
									</view>
							</view>
							<image class="more" src="../../static/mine/toRight.svg"></image>
						</view>
					</block>
					<view style="height: 100upx;"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Request
	} from "@/utils/request.js";
	var app = getApp();

	let seach_number = 6
	let page = 6

	export default {
		data() {
			return {
				tabIndex: 0,
				winHeight: '',
				animation: '',
				winHeight_right: '',
				typeList: [],
				LoginCode: '',
				shopList: [],
				detailList: [],
				typeId: '',
				longitude: 0,
				latitude: 0,
			}
		},
		methods: {
			tabtap: function(index_type) {
				this.tabIndex = index_type
			},
			//禁止用户滑动
			stopTouchMove: function() {
				return true;
			},
			//跳转至详细页,传id,那边用onload(option)接收
			todetail: function(index, id) {
				let goodsInfo = this.detailList[index];
				let GoodsJson = encodeURIComponent(JSON.stringify(goodsInfo));
				console.log('GoodsJson',goodsInfo);

				uni.navigateTo({
					url: '/pages/shop/detail/detail?id=' + id + '&goodsinfo=' + GoodsJson,
				})
			},
			//点击分类获取商品
			showShop: function(index) {
				seach_number = 6
				//分组id
				this.typeId = this.typeList[index].id
				new Request('goods/Get_Goods_Category/GetGoodsList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							project: app.globalData.project,
							DevelopVersion: app.globalData.DevelopVersion,
							group_id: this.typeId,
							seach_number: seach_number,
									latitude: this.latitude,
									longitude: this.longitude,
									// latitude: 23.15792,
									// longitude: 113.27324,
							page: 0
						}
					},
					(res) => {
						if (res.data.code == '0') {
							new Request().showToast(res.data.msg);
							this.detailList = [];
							return;
						} else {
							this.detailList = res.data
						}
					}
				)
			},
			//scroll-view触底,调用加载商品loadMore
			toLoadmore: function(e) {
				uni.showToast({
					title: '加载中...',
					icon: 'loading',
					duration: 500
				})
				var that = this
				setTimeout(function() {
					that.loadMore()
				}, 500);
			},
			//上拉加载商品
			loadMore: function() {
				new Request('Getgoodsinfo/GetTechnologyGoodList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							project: app.globalData.project,
							DevelopVersion: app.globalData.DevelopVersion,
							group_id: this.typeId,
							seach_number: seach_number,
							page: page,
						}
					},
					(res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '没有更多数据了',
								position: 'center',
								icon: 'none'
							})
						} else {
							page += seach_number
							this.detailList = this.detailList.concat(res.data.data)
							console.log(this.detailList)
						}
					}
				)
			},
			GetGoodsList: function(){
				//商品分类接口
				new Request('goods/Get_Goods_Category/GetGoodsCategoryList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						console.log(res)
						//分组列表
						this.typeList = res.data
						this.typeId = res.data[0].id
						// console.log('typyid1', this.typeId)
						// //商品列表接口
						seach_number = 6
						new Request('goods/Get_Goods_Category/GetGoodsList').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									project: app.globalData.project,
									DevelopVersion: app.globalData.DevelopVersion,
									group_id: this.typeId,
									latitude: this.latitude,
									
									longitude: this.longitude,
									seach_number: seach_number,
									page: 0
								}
							},
							(res) => {
								console.log('typyid3', this.typeId)
								if (res.data.code == 0) {
									new Request().showToast(res.data.msg);
									return;
								} else {
									this.detailList = res.data
								}
							}
						)
					}
				)
			},
		},
		onLoad() {
			//获取窗口高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(140)
					let height_right = res.windowHeight - uni.upx2px(30)
					this.winHeight = height
					this.winHeight_right = height_right
				}
			})
			
			uni.getLocation({
			    type: 'wgs84',
			    success:  (res) => {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.GetGoodsList(); 
			    },
			});
		},
		//上拉加载,调用loadMore
		// onReachBottom() {
		// 	var that = this
		// 	setTimeout(function() {
		// 		that.loadMore()
		// 	}, 300);
		// },
		onShow() {
			this.animation = ' animated flipInX';
			this.LoginCode = app.globalData.Logincode;
			
		},
		onHide() {
			this.animation = ''
		}
	}
</script>

<style scoped>
	.content {
		padding-top: 10upx;
		height: 1000upx;
		margin: 0 25upx;
		display: flex;
	}

	/*
		搜索框样式
	*/
	.seach {
		background-color: #e6e6e6;
		height: 70upx;
		width: 700upx;
		border-radius: 30upx;
		display: flex;
	}

	.seach_view {
		height: 70upx;
		width: 650upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.seach_img {
		width: 42upx;
		height: 42upx;
	}

	.seach_text {
		height: 60upx;
		width: 580upx;
		font-size: 28upx;
	}

	/*
		左侧菜单栏
	*/
	.left_list {
		width: 25%;
		padding: 15upx;
		margin-top: 15upx;
		border-right: 3upx solid #e6e6e6;
		display: flex;
		align-items: center;
	}

	.scroll_list {
		height: 95%;
	}

	.list_view {
		padding-bottom: 35upx;
		display: flex;
		align-items: center;
	}

	.list {
		font-size: 26upx;
		margin: 0 auto;
		height: 50upx;
		line-height: 50upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.active {
		font-size: 28upx;
		margin: 0 auto;
		height: 50upx;
		width: 170upx;
		line-height: 50upx;
		/* background-color: #EC0D0D; */
		background-color: #8AE3D7;
		color: #FFFFFF;
		border-radius: 50upx;
		text-align: center;
	}

	/*
		右侧商品详细
	*/

	.right_view {
		width: 75%;
		overflow: hidden;
		/* background-color: #007AFF; */
	}

	.right_view_space {
		position: fixed;
		z-index: 999;
		right: 0upx;
		padding-top: 50upx;
		width: 70%;
		display: flex;
	}

	.scroll_shop {
		width: 515upx;
		padding-bottom: 100upx;
	}

	/* .swiper_view {
		height: 100%;
		width: 100%;
	} */

	.shop_detail_view {
		height: 100upx;
		margin: 0 10upx;
		padding-top: 50upx;
		padding-bottom: 25upx;
		padding-left: 25upx;
		padding-right: 15upx;
		border-bottom: 3upx solid #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_detail {
		height: 90upx;
		width: 375upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 26upx;
		text-align: center;
	}

	.shop_detail_zu {
		height: 170upx;
		width: 375upx;
		display: flex;
		justify-content: space-between;
		font-size: 26upx;
		text-align: center;
	}
	
	.shop_detail_left {
		width: 180upx;
		height: 140upx;
	}
	
	.shop_detail_left image {
		width: 100%;
		height: 100%;
	}
	
	.shop_detail_right {
		width: 180upx;
		height: 140upx;
		
		display: flex;
		flex-direction: column;
	}
	
	.shop_detail_right text {
		font-size: 19upx;
		text-align: left;
	}

	.more {
		/* background-color: #999999; */
		width: 44upx;
		height: 44upx;
		transform: rotate(180deg);
	}

	.shop_name {
		height: 38upx;
		border-radius: 50upx;
		line-height: 38upx;
		display: flex;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop_price_num {
		height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_num {
		width: 183upx;
		height: 38upx;
		border-radius: 50upx;
		line-height: 38upx;
		display: flex;
	}

	.shop_price {
		height: 38upx;
		border-radius: 50upx;
		line-height: 38upx;
	}
</style>
